<script setup>
import { useUserStore } from '@/stores/user';
import { Toast } from 'vant';
import api4j from '@/api/example';
import { EiInfo } from '@eplat/ei';

const router = useRouter();
// eslint-disable-next-line no-unused-vars
const user = useUserStore();
const loading = ref(false);
// eslint-disable-next-line no-unused-vars
const finish = ref(false);
// eslint-disable-next-line no-unused-vars
const onLoad = () => {
  loading.value = true;
  if (data1.value.length == 0 || data2.value.length == 0) {
    applyList();
    applyList1();
  }
  loading.value = false;
};

/**
 * 登录
 * @returns {Promise<void>}
 */
const applyList = async () => {
  // RCRM0103_HCQF
  const postEiInfo = new EiInfo();
  await api4j
    .RCRM0103_HCQFGYY(postEiInfo)
    .then((res) => {
      data1.value = [];
      if (res.blocks.building.rows.length > 0) {
        data1.value.push(...res.blocks.building.rows);
        // // console.log('data1', data1);
      }
      // // console.log(res.blocks.building.rows);
      // // console.log('resHCQF', res);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const applyList1 = async () => {
  // RCRM0103_HCQF
  const postEiInfo = new EiInfo();
  await api4j
    .RCRM0103_HCQFGYYTotal(postEiInfo)
    .then((res) => {
      data2.value = [];
      if (res.blocks.building.rows.length > 0) {
        data2.value.push(...res.blocks.building.rows);
        // console.log('data2', data2);
      }
      // console.log(res.blocks.building.rows);
      // console.log('query', res);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const data1 = ref([]);
const data2 = ref([]);
const value = ref('');
const onSearch = (val) => Toast(val);
const onClickButton = () => {
  Toast('搜索完成');
  if (value.value.length == 0) {
    applyList1();
    return;
  }
  if (value.value == '租赁') {
    // 重新赋值给 data
    data2.value = data2.value.filter((item) => item[7] === '02');
    return;
  }
  if (value.value == '闲置') {
    // 重新赋值给 data
    data2.value = data2.value.filter((item) => item[7] === '04');
    return;
  }
  if (value.value == '自用') {
    // 重新赋值给 data
    Toast('更多信息请前往pc端');
    return;
  }
  if (value.value == '处置') {
    // 重新赋值给 data
    Toast('更多信息请前往pc端');
    return;
  }
  Toast('暂无数据');
  // data2.value = [];
};
</script>
<!--../../../../src/assets/gzbj1.png-->
<template>
  <div>
    <div
      style="
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #4b75e5;
        height: 65px;
        color: white;
        z-index: 1000;
      "
    >
      <div style="font-size: 20px; padding-top: 20px; text-align: center">资产地图</div>
      <van-button
        to="/WX/GZ/WXGZ03"
        style="
          background-color: #4b75e5;
          color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #4b75e5;
          margin-top: -32px;
          margin-left: 20px;
        "
      >
        <img
          src="@/assets/tb166.svg"
          style="width: 35px; height: 35px; margin-top: 3px; margin-left: -20px"
          alt=""
          @click="goto1()"
        />
      </van-button>
    </div>
    <div
      style="
        margin-top: 75px;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        height: 48px;
        background-color: #94ccff;
        display: flex;
      "
    >
      <div style="display: flex; background-color: #1690ff; width: 11px; align-items: center">
        <!-- 垂直居中的容器 -->
      </div>
      <div style="background-color: #94ccff; display: flex; align-items: center; width: 100%">
        <span style="text-align: center; font-size: 14px; margin-left: 5%"
          >重庆市合川轻纺工业园有限公司</span
        >
        <van-tag type="warning" size="large" round style="margin-left: 15%">轻纺工业园</van-tag>
      </div>
    </div>
    <van-list
      v-model:loading="loading"
      class="working-list"
      :finished="finish"
      finished-text=""
      offset="1"
      @load="onLoad"
    >
      <div v-for="(item, index) in data1" style="margin-top: 2%">
        <van-tag type="primary" size="medium" style="margin-left: 6px; width: 29%; height: 30px"
          >总面积: <span style="">{{ item[5] }}(㎡)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已租赁: <span style="color: #07c160">{{ item[20] }}(㎡)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已闲置:
          <span style="color: #ee597c; text-align: center">{{ item[21] }}(㎡)</span></van-tag
        >
        <van-tag
          type="primary"
          size="medium"
          style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
          >总套数: <span style="">{{ item[12] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已租赁: <span style="color: #ffeb3b">{{ item[15] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已闲置:
          <span style="color: #ff8d1a; text-align: center">{{ item[7] }}(套)</span></van-tag
        >

        <van-tag
          type="primary"
          size="medium"
          style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
          >已抵押: <span style="color: #ff5733">{{ item[0] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已自用: <span style="color: #07c160">{{ item[3] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已处置:
          <span style="color: darkgray; text-align: center">{{ item[10] }}(套)</span></van-tag
        >
      </div>
      <!--      select-->
      <van-search
        v-model="value"
        show-action
        label="状态"
        placeholder="请输入(租赁，闲置)"
        @search="onSearch"
      >
        <template #action>
          <div
            style="
              border: 1px solid #000; /* 2px 宽度，实线，黑色 */
              width: 45px;
              text-align: center;
            "
            @click="onClickButton"
          >
            搜索
          </div>
        </template>
      </van-search>
      <!--   query   -->
      <div
        v-for="(item, index) in data2"
        style="
          margin-left: 2%;
          margin-right: 2%;
          background-color: #ffffff;
          width: 96%;
          height: 82px;
          margin-top: 2%;
          outline: 1px solid #dedede;
        "
      >
        <div style="display: flex">
          <div style="margin-top: 3%; margin-left: 3%">
            <span style="font-size: 14px; font-weight: bold">{{ item[0] }}</span>
          </div>
          <div style="margin-top: 3%; margin-left: 15%">
            <span style="font-size: 14px; font-weight: bold">{{ item[3] }}</span>
          </div>
          <div style="margin-top: 3%; margin-left: 43%">
            <span v-if="item[7] == '02'" style="font-size: 14px; font-weight: bold; color: #e33c64">
              租赁
            </span>
            <span v-if="item[7] == '04'" style="font-size: 14px; font-weight: bold; color: #1690ff"
              >闲置</span
            >
            <span v-if="item[7] == '01,02'" style="font-size: 14px; font-weight: bold; color: #ff8d1a"
              >自用</span
            >
            <span v-if="item[7] == '07'" style="font-size: 14px; font-weight: bold; color: #000000"
              >处置</span
            >
          </div>
        </div>
        <div style="margin-top: 3%; margin-left: 2.5%">
          <span style="color: #9b9b9b"> {{ item[4] }} </span>
        </div>
        <div v-if="data2.length == 0" style="margin-top: 20px; color: gray; text-align: center">
          暂无数据
        </div>
      </div>
    </van-list>
  </div>
</template>

<style lang="stylus" scoped>
.page-main

  .working-list
    .item1
      padding-top 0px
      padding-bottom 0px
    .title1
      color #003586
      font-weight bolder
      font-size 13px
    .titles
      color #161718
      font-weight bolder
      font-size 13px
    .titless
      color #161718
      font-weight bolder
      font-size 17px
    .title2
      color #808080
      font-size 13px
    padding 4px
    margin-bottom 48px
    .van-tag
      margin-left 5px
      font-size 12px
      padding 5px
    .btn1
      background-color #038008
      border-radius 5px
      margin-left 5px
    .btn0
      background-color #ff8d1a
      border-radius 5px
      margin-left 5px
    .class1
      background-color #99bcf1
      border-radius 5px
    .class2
      background-color #f19999
      border-radius 5px
    .class3
      background-color #99a6f1
      border-radius 5px
    .card-item
      margin 8px
      background-color white

      .item-value
        display flex
        justify-content space-between
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
        .group1
          display flex
          flex-direction row
          justify-content space-between

  .bottom-buttons
    position fixed
    bottom 12px
    left auto
    width 100%
    max-width var(--max-width)
</style>
